<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>生成投票</title>
  <link href="https://cdn.bootcss.com/weui/1.1.2/style/weui.css" rel="stylesheet">
  <link href="https://cdn.bootcss.com/jquery-weui/1.2.0/css/jquery-weui.css" rel="stylesheet">
  <style>
    html,body,p,ul,li,main,section{
      margin: 0;
      padding: 0;
    }
    html,body {
      background-color: #f3f4f7;
      -webkit-tap-highlight-color: transparent;
    }
    .select-item {
      width: 90%;
      margin-left: 8px;
    }
    .btn-submit {
      width: 80%;
      margin: auto;
      margin-top: 35px;
    }
    .weui-icon-addition::before {
      content: '+';
      margin-bottom: 5px;
    }
  </style>
</head>

<body>
  <main>
    <section>
      <div class="weui-cells__title">
        <p>投票说明</p>
      </div>
      <div class="weui-cells weui-cells_form">
        <div class="weui-cell">
          <div class="weui-cell___bd">
            <input class="weui-input select-item" type="tel" placeholder="投票标题">
          </div>
        </div>
        <div class="select-group-item">
          <div class="weui-cell">
            <div class="weui-cell__hd">
            </div>
            <div class="weui-cell__bd">
              <i class="weui-icon-delete"></i><input class="weui-input select-item" type="text" placeholder="选项">
            </div>
          </div>
          <div class="weui-cell">
            <div class="weui-cell__hd">
            </div>
            <div class="weui-cell__bd">
              <i class="weui-icon-delete"></i><input class="weui-input select-item" type="text" placeholder="选项">
            </div>
          </div>
        </div>
        <a href="javascript:void(0);" class="weui-cell weui-cell_link">
          <div class="weui-cell__bd" id="add-select-item"> <i class="weui-icon-addition"></i>添加选项</div>
        </a>
      </div>
      <div class="weui-cells__title"></div>
      <div class="weui-cells weui-cells_form">
        <div class="weui-cell">
          <div class="weui-cell__hd">
            <label for="datetime-picker" class="weui-label">截止日期</label>
          </div>
          <div class="weui-cell__bd">
            <input class="weui-input" type="text" id='datetime-picker' readonly />
          </div>
        </div>
        <div class="weui-cell weui-cell_switch">
          <div class="weui-cell__bd">匿名投票</div>
          <div class="weui-cell__ft">
            <input class="weui-switch" type="checkbox">
          </div>
        </div>
      </div>
    </section>
    <section class="btn-submit">
      <a href="javascript:;" class="weui-btn weui-btn_primary" id="submit">完成</a>
    </section>
    <section>
    </section>
  </main>
  <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/jquery-weui/1.2.0/js/jquery-weui.js"></script>
  <!-- 如果使用了某些拓展插件还需要额外的JS -->
  <script src="https://cdn.bootcss.com/jquery-weui/1.2.0/js/swiper.js"></script>
  <script src="https://cdn.bootcss.com/jquery-weui/1.2.0/js/city-picker.js"></script>
  <script src="js/app.js"></script>
  <script>
    // 对Date的扩展，将 Date 转化为指定格式的String
    // 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符， 
    // 年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字) 
    // 例子： 
    // (new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423 
    // (new Date()).Format("yyyy-M-d h:m:s.S")      ==> 2006-7-2 8:9:4.18 
    Date.prototype.Format = function (fmt) {
      var o = {
        "M+": this.getMonth() + 1, //月份 
        "d+": this.getDate(), //日 
        "h+": this.getHours(), //小时 
        "m+": this.getMinutes(), //分 
        "s+": this.getSeconds(), //秒 
        "q+": Math.floor((this.getMonth() + 3) / 3), //季度 
        "S": this.getMilliseconds() //毫秒 
      };
      if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
      for (var k in o)
        if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : ((
          "00" + o[k]).substr(("" + o[k]).length)));
      return fmt;
    }

    var time = new Date();
    var nowTime = time.Format('yyyy-MM-dd hh:mm');
    var nowYear = time.getFullYear();
    var nowMonth = time.getMonth();
    var choosableMonths = [];
    var minTime = time.Format('yyyy-MM-dd');
    for (var i = nowMonth ; i <= 12; i++) {
      choosableMonths.push(i);
    }
    $("#datetime-picker").val(nowTime);
    $("#datetime-picker").datetimePicker({
      title: '截止日期',
      // 截止时间只能选择未来的时间
      min: minTime,
      // years: [nowYear],
      // monthes: choosableMonths
    });

    /**
    ** 添加选项
    */
    $('#add-select-item').click(function () {
      var selectTmp = '<div class="weui-cell">'
            + '<div class="weui-cell__hd">'
            + '</div>'
            + '<div class="weui-cell__bd">'
            + '<i class="weui-icon-delete"></i><input class="weui-input select-item" type="text" placeholder="选项">'
            + '</div>'
            + '</div>';
      var selectItem = $('.select-group-item .weui-cell').clone()[0] || selectTmp;
      $(selectItem).find('input').val('').attr('placeholder', '选项');
      $('.select-group-item').append(selectItem);
    });
    $('.select-group-item').delegate('.weui-icon-delete', 'click', function(evt) {
        console.log(evt);
        $(evt.currentTarget.parentNode.parentNode).remove();
    })
    
    $('#submit').click(function() {
      
      $.ajax({
        type: "POST",
        url: "url",
        data: postData,
        dataType: "html",
        success: function (response) {
          console.log(response);
        }
      });
    })
  </script>
</body>

</html>